<template>
	<div class="win-box">
		<div class="wrap-box">
			<div class="connect-box">
				<header>
					<div class="left-box">
						已中奖
					</div>
					<p @click="clickWinExplain">中奖说明</p>
				</header>
				<p class="tip-text">恭喜！你抽中了</p>
				<div class="win-connect-box">
					<!--实物奖品-->
					<div class="sw-prize-box" v-if='isEntity'>
						<p>{{locWinInfo.prizeNm}}</p>
						<img :src="locWinInfo.picUrl || defaultPngSW " />
					</div>
					<!--奖品券-->
					<div class="jq-prize-box" v-if='isCouponCode'>
						<div class="jq-top">
							<p>{{locWinInfo.prizeNm}}</p>
							<div @click="toggleImg" :class="[eyeState]"></div>
						</div>
						<p class="jq-num">券码：{{jmModel}}</p>
						<p class="jq-copy" @click = "clickCopy">复制</p>
						<!--<input type="" name="" id="myelement" :value="winInfo.ticketNo" />-->
					</div>
				</div>
				<p class="failure-time">有效期：{{locWinInfo.effeStartTime.slice(0,10)}} 至 {{locWinInfo.effeEndTime.slice(0,10)}}</p>
				<div class="btn" @click="clickBtn">
					{{btnText}}
				</div>
				<p class="footer-tip" v-if="fromCom=='fromLivePrizeCom'">可“返回直播首页-我的-我的奖品礼券”中查看</p>
        <p v-if="isShowYinSi" class="footer-tip-privacy" @click="seeYinsi">
          <van-icon name="info-o" color="#fff" style="padding-top: 5px;"/>
          <span>隐私政策</span>
        </p>
			</div>
			<div class="close-btn-win-bottom" @click="clickClose"></div>
		</div>
	</div>
</template>

<script>
import fun from "../../util/function";
	export default {
		props: {
			winInfo: Object, //中奖信息 抽中
			fromCom: String, //来自哪个组件
		},
		data() {
			return {
				isEntity: false, //实物
				isCouponCode: false, //券码
				locWinInfo: this.winInfo, //数据保存一份
				btnText: '', //底部按钮提示文字
				eyeState: 'eye-open', //眼睛图标状态
				jmModel: '',
				defaultPngSW: require("@/assets/images/choujiang/shiwu.png"),
        getPlatform:fun.getPlatform(),
        isShowYinSi:true,//是否展示隐私政策
			}
		},
		created() {
      if(this.$channel == 'zxjtqh'){
        if(this.getPlatform!='wx'){
            this.isShowYinSi = false //中信建投期货 只有微信展示
        }
      };
			this.jmModel = this.winInfo.ticketNo;
			if(this.locWinInfo.prizeType == '1') { //实物1
				this.isEntity = true;
				if(this.locWinInfo.rwAddress) { //true 需要填写地址 false 不需要
					//console.log(this.locWinInfo)
					if(this.locWinInfo.expire){//true  过期
						this.btnText = '查看领奖信息'
					}else{
						this.btnText = '填写领奖信息'
					}
				} else {
					this.btnText = '开心收下'
				}
			} else if(this.locWinInfo.prizeType == '2') { //券码2
				this.isCouponCode = true;
				this.btnText = '开心收下'
			}
		},
		methods: {
      seeYinsi(){
        // 打开父组件的隐私政策
        this.$parent.$parent.isPrivacy = true;
      },
			clickCopy() {
				fun.copyTxt(this.winInfo.ticketNo,this.tipFun)
			},
			tipFun(){
				fun.toastMessage('复制成功')
			},
			toggleImg() {
				if(this.eyeState == 'eye-open') {
					this.eyeState = 'eye-close'
					this.jmModel = '************'
				} else {
					this.eyeState = 'eye-open';
					this.jmModel = this.winInfo.ticketNo
				}
			},
			clickClose() {
				this.$emit('formChildMsg', {
					type: 'closeWinCom',
					data: 'ruan'
				})
			},
			clickBtn() {
				if(this.locWinInfo.rwAddress) { //填写地址按钮
					this.$emit('formChildMsg', {
						type: 'addPrizeInfo',
						data: 'ruan'
					})
				} else { //开心收下
					this.$emit('formChildMsg', {
						type: 'closeWinCom',
						data: 'ruan'
					})
				}
			},
			closeLosingCom() { //关闭中奖组件
				this.$emit('formChildMsg', {
					type: 'closeLosingCom',
					data: 'ruan'
				})
			},
			clickWinExplain() { //中奖说明
				this.$emit('formChildMsg', {
					type: 'winExplainType',
					data: this.locWinInfo
				})
			}
		}
	}
</script>

<style scoped="scoped">
	input {
		background: #FFF5EE;
	}

	.eye-open {
		background: url(../../assets/images/choujiang/eye-open.png) no-repeat;
		background-size: 52px 34px;
		border: none;
		outline: none;
	}

	.eye-close {
		background: url(../../assets/images/choujiang/eye-close.png) no-repeat;
		background-size: 52px 34px;
		border: none;
		outline: none;
	}

	.wrap-box {
		width: 100vw;
		height: 900px;
		/*background: salmon;*/
		position: relative;
	}

	.close-btn-win-bottom{
		width: 63px;
		height: 63px;
		background: url(../../assets/images/choujiang/cj-close.png) no-repeat;
		background-size: 63px 63px;
		/*margin: 100px auto 0;*/
		position: absolute;
		bottom: 10px;
		left: calc(50% - 31.5px);
	}

	.jq-copy {
		margin: 0 auto;
		width: 98px;
		height: 44px;
		border: 1px solid #965636;
		border-radius: 5px 5px 5px 5px;
		line-height: 44px;
		text-align: center;
		color: #965636;
		font-size: 24px;
		margin-top: 15px;
	}

	.jq-num {
		color: #A32522;
		font-size: 34px;
		margin: 25px 0 0 0px;
		word-wrap: break-word;
		word-break: break-all;
		white-space: pre-wrap !important;
		line-height: 36px;
	}

	.jq-num span {
		padding: 4px 10px;
		background: #FDE8E0;
	}

	.jq-prize-box {
		width: 100%;
		height: 100%;
		padding-left: 37px;
		/*display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: column;*/
	}

	.jq-top {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-top: 50px;
		color: #A32522;
		font-size: 34px;
		font-weight: 600;
	}

	.jq-top div {
		width: 52px;
		height: 34px;
		margin-left: 10px;
	}

	.sw-prize-box {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.sw-prize-box p {
		font-size: 34px;
		color: #AB391F;
		font-weight: bold;
	}

	.sw-prize-box img {
		width: 156px;
		height: 156px;
		margin-top: 21px;
	}

	.footer-tip {
		font-size: 24px;
		color: #FFE7BA;
		text-align: center;
		margin-top: 37px;
	}
  /* 隐私政策 */
  .footer-tip-privacy{
    text-align: center;
    font-size: 24px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 33px;
    margin-top: 15px
  }

	.btn {
		width: 343px;
		height: 96px;
		background: linear-gradient(-180deg, #FEE3D2 0%, #FFCCAC 100%);
		border-radius: 48px;
		line-height: 96px;
		text-align: center;
		color: #965636;
		font-size: 38px;
		margin: 81px auto 0;
		font-weight: 600;
	}

	.failure-time {
		color: #FFFFFF;
		font-size: 28px;
		text-align: center;
	}

	.win-connect-box {
		width: 487px;
		height: 257px;
		background: #FFF5EE;
		border-radius: 6px;
		margin: 23px auto 27px;
	}

	.left-box {
		width: 171px;
		height: 57px;
		background: url(../../assets/images/choujiang/lefttab.png) no-repeat;
		background-size: 171px 57px;
		text-align: center;
		line-height: 57px;
		font-size: 26px;
		color: #815048;
	}

	.tip-text {
		width: 100%;
		font-size: 38px;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 40px;
		text-align: center;
		margin-top: 58px;
	}

	header {
		width: 100%;
		height: 56px;
		/*background: seagreen;*/
		line-height: 56px;
	}

	header .left-box {
		float: left;
		color: #815048;
		font-size: 26px;
	}

	header p {
		float: right;
		color: #1590FF;
		font-size: 26px;
		border-bottom: 1px solid #1590FF;
		line-height: 40px;
		margin-right: 44px;
		margin-top: 10px;
	}

	.win-box {
		width: 100vw;
		height: 100vh;
		/*background: salmon;*/
		/*background: rgba(0, 0, 0, .4);*/
		margin: 0 auto;
		position: absolute;
		z-index: 1010;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.connect-box {
		width: 561px;
		height: 783px;
		background: linear-gradient(-45deg, #F84848 0%, #FF7878 100%);
		border: 2px solid #FED8C0;
		border-radius: 17px;
		margin: 0 auto;
	}
</style>
